react native axios 封装组件
一、最近在研究react native的网络请求，然后自己封装了一个来练习1.添加axios 和querystring依赖yarn add axios && yarn add querystring2.新建 src/common/httpBaseConfig.js3.新建 src/utils/http/index.jsimport axios from 'axios';import qs from 'querystring';import baseConfig from '../../common/http...
2024-01-10
react-native 打包Android Release版本报错
RN项目，Debug版本可以正常运行，Release版本报错找了很多方面，一直没有解决，后来发现是多运行了一个命令导致的！！如下：请注意不要运行此命令后打包，否则一定回报资源错误！！！react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-...
2024-01-10
android 架构之集成react native框架js混编APP
本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。什么是 js 混编？js混编简单说就是使用JavaScript开发APP程序。android应用使用的是java，Kotlin 、c/c++ 为主的语言开发，ios使用的object-c 、 swift、c/c++ 为主语言开发，由于市场是基本都是android和ios手机，所以一般公司开发什么项目androi...
2024-01-10
react-native icon使用方式
为什么80%的码农都做不了架构师？>>> 用的是antd官方带的antd icon组件,组件中的代码是这样写的:/** * Created by apple on 2017/12/30. */import React from 'react';import { Icon, Grid } from 'antd-mobile';const list = [ 'check-circle', 'check', 'check-circle-o', 'cross-circle', 'cross', 'cros...
2024-01-10
React Native工程修改Android包名
默认初始化的React Native工程，生成Android工程的时候，包名默认是React Native工程的名字，跟一般Android工程com.company.xxx不一样。这时候就需要手动修改Android工程里面的包名信息：如下：首先修改React Native目录下的MainActivity.java的包名，具体路径是（android/app/src/main/java/com/PROJECT_NAME/MainActivity.java）修改 p...
2024-01-10
windows下的react-native 开发环境搭建
本教程用安卓手机作为演示。首先安装jdk。本教程基于jdk1.8，安装时有一点要特别注意：jdk和jre必须装到不同目录下，否则初始化react-native项目时大概率报tools.jar not found exception。具体流程：先安装jdk到默认目录，第二次弹出选择路径对话框的时候先到jdk目录下删除jre文件夹，再安装jre到不同目录。...
2024-01-10
Android React-Native通信数据模型分析
无论是计算机领域还是日常生活中，我们所言的通信，其核心都是数据信息的交换，而数据模型的优劣对通信效率有着决定性的作用。在React-Native项目中，Javascript语言与Native两种语言（Java或OC等）间存在着大量的数据交换，也就是所谓的通信。众所周知，移动APP对性能的要求无比苛刻，如果通信数据...
2024-01-10
react native 日常-集成antd-mobile-rn蚂蚁金服插件
antd-mobile-rn阿里开源框架link. 组件官网1.常规npm// 终端内导入组件npm install antd-mobile-rn --save2.使用// 项目内使用组件import { 需要的组件 } from 'antd-mobile';3.例如时间选择器// 该组件时间格式需转换//import moment from "moment";转换时间 <DatePicker value={moment(时间).toDate()} m...
2024-01-10
【react native】react navigation简述（3）
createStackNavigatorcreateStackNavigator类似于普通的navigator，屏幕上方导航栏createBottomTabNavigator屏幕下方标签栏createMaterialTopTabNavigator屏幕顶部的材料设计主题标签栏createDrawerNavigator抽屉效果，侧边划出createSwitchNavigator用途是一次只显示一个页面（跳转页面时候，第一个页面跳转到第...
2024-01-10
React Native & Android & iOS & APK
React Native & Android & iOS & APK React Native & Android & ...
2024-01-10
用 React 整合 LogEntries JavaScript 库
【编者按】本文作者为 David Posin，主要介绍 React 与 LogEntries 间的相互操作。本文系国内 ITOM 管理平台 OneAPM 编译呈现。众所周知，React.js已经被证实是众多JavaScript架构中的有力竞争者。按理说，它已经成为web开发人员应当考虑的，在当前及未来项目中使用的少数项目库之一。而了解它如何与技术栈中...
2024-01-10
Android React Native 开发环境搭建---windows下
环境搭建环境搭建可以参考RN官网，也可以参考中文版本：http://reactnative.cn/docs/0.45/getting-started.html如果你希望可以看到原版的安装流程，可以看官方的地址，本文只是我个人的实践，并且仅限于window平台。官方的地址：https://facebook.github.io/react-native/docs/getting-started.html1.下载Chocolatey去官网下载，一...
2024-01-10
你不可不知的 React Native 混合用法（Android 篇）
前言当前 React Native 虽说版本更新比较快，各种组件也提供的很全面了，但是在某些情况下，混合开发的方式才会快速缩短开发周期，原因无非就是原生平台的“底蕴”无疑更深，拥有众多且类型丰富的第三方支持库。很多情况下，运用这些库可以避免苦逼的重复劳动。接下来我们以 [jpush-react-native ...
2024-01-10
Mac 配置安卓React Native 开发环境（苹果和Android双端）
前言 由于近段时间前端React的火热，主要使用React语法用一套代码生成苹果和安卓双端代码的React-native开发备受关注，本人由于项目需要，也开始入门React-native； PS：对于想要学习RN的友友们，入门一Mac是必须的了，哈哈哈！配置React-Native环境 本人在mac上配置RN环境，首先进入RN官网，按...
2024-01-10
react-native 轮播组件 looped-carousel使用介绍
一 关于轮播类组件，网上其实已经有挺多了，本人曾经用过 swiper，viewpager，以及facebook出品的viewpagerAndroid。swiper因在安卓上有问题，而且在组件嵌套使用时问题较多，所以弃用。后来尝试viewpager，因为轮播时，下面的圆点显示有误，所以弃用。而ViewpagerAndroid因为只支持安卓系统，所以很少用到，在...
2024-01-10详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键，会控制页面返回， 并且退出应用并非真正意义退出，仍在后台运行，所以在某些场景下需要监控android回退按键，那么在React Native中应该如何应用呢？我们具体来看看。BackAndroid此模块用于监听硬件的back键操作。看下具...
2024-01-10
React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似，例如：在Android Studio打开的工程中，打开源码MainActivity.java，然后，将鼠标移至代码编辑区的左侧后，单击鼠标即可添加断点，接着，选择菜单Debug -> Debug ‘app’，即可调试Android应用，效果如图5.12所示。图5.12 Android原生项目断点调试 如果要调试...
2024-01-10
ReactNative 本地文件访问 react-native-fs Android配置所遇到的坑
事件背景：react-native-fs配置完毕之后在Android无法使用，无法编译通过；安装：npm install react-native-fs --save如果 RN版本<0.57或者Gradle < 3：需要安装：npm install [email protected]–save本人的RN版本0.44.3所以遇到了坑，官方npm上的配置也一步步配置了，发现在ios没有问题，但是在android上不能运行，不能编译通...
2024-01-10
React Native未来导航者：react-navigation 使用详解
该库包含三类组件：（1）StackNavigator：用来跳转页面和传递参数（2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面（3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕react-navigation使用 具体内容大致分为如下：（1）react-navigation库属性介绍（2）StackNavigator、TabNavig...
2024-01-10
使用react-navigation提示undefind is not a function
在学习react-natrive的时候，看到导航跳转一章，遂试了一下demo:但是呢，在安卓模拟器上却报错了：找了许多方法，包括降低版本都不行，后来修改了一下导出就可以了：...
2024-01-10
React-navigation StackNavigator 使用攻略
目前的项目迭代进展到使用navigation来串联不同的screen，但是在涉及到对navigationOptions进行定制的时候由于版本的问题，网上的很多资料其实都是已经过时了的（有些则是并不相干）。本文针对RN 0.44，React-navigation ^1.0.0-beta.11，进行navigationOptions的解释。 首先是navigationOptions的两种使用方法。...
2024-01-10React-Native之Android(6.0及以上)权限申请详解
为什么Android要申请权限简单说下在Android6.0及6.0以上一些google认为涉及“危险和用户隐私”的一些权限不仅要做清单文件(android/app/src/AndroidMainfest.xml)里面申请，还有单独调用api，去让用户选择是否同意你申请这个权限。例如：你想要你的app有读写手机外置内存卡权限，那么你需要在清单文件里面加下...
2024-01-10
react-hooks之useImperativeHandle使用详解
useImperativeHandle可以通过使用ref时自定义暴露给父组件的实列值，并配合forwardRef一起使用下面是一个简单的例子暴露给父组件一个属性值效果如下该钩子函数还有第三个参数，如果里面涉及到某个变化的值，只有当第三个参数发生改变时，父组件接收到的该值才会发生改变代码如下所示：先点击setCo...
2024-01-10![[RN] React Native 图片保存到相册(支持 Android 和 ios)](/wp-content/uploads/thumbs/534952_thumbnail.jpg)
[RN] React Native 图片保存到相册(支持 Android 和 ios)
React Native 图片保存到相册(支持 Android 和 ios)原理：IOS用 RN自带的 CameraRoll，Android 使用 不成功，需要 react-native-fs 和 CameraRoll 配合使用已经封装成类：ImageUtil.js'use strict';import React from 'react';import {CameraRoll, Platform} from 'react-native';import ToastUtil from "./ToastU...
2024-01-10
React Native未来导航者：react-navigation 使用详解（基础篇）
一、开源库介绍今年1月份，新开源的react-natvigation库备受瞩目。在短短不到3个月的时间，github上星数已达4000+。Fb推荐使用库，并且在React Native当前最新版本0.44中将Navigator删除。react-navigation据称有原生般的性能体验效果。可能会成为未来React Native导航组件的主流军。本篇内容基于【 ^1.0.0-beta.9 】版本...
2024-01-10
